<template>
  <el-main class="position-container">
    <!-- 控件区域 -->
    <div class="controls-container">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select v-model="indexSelected" placeholder="指数选择">
            <el-option label="上证指数" value="000001" />
            <el-option label="深证成指" value="399001" />
            <el-option label="沪深300" value="000300" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-date-picker
            v-model="dataDate"
            type="date"
            placeholder="数据集"
          />
        </el-col>
        <el-col :span="5">
          <el-radio-group v-model="timeRange" size="small">
            <el-radio-button label="5">近五年</el-radio-button>
            <el-radio-button label="3">近三年</el-radio-button>
            <el-radio-button label="2">近两年</el-radio-button>
            <el-radio-button label="1">近一年</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="4">
          <el-select v-model="strategySelected" placeholder="策略选择">
            <el-option label="均线策略" value="moving-average" />
            <el-option label="动量策略" value="momentum" />
            <el-option label="均值回归" value="mean-reversion" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="startCalculation">开始计算</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="chart-container">
      <div ref="chartRef" class="chart" />
    </div>

    <!-- 计算结果区域 -->
    <div class="result-container">
      <el-row :gutter="30" class="result-row">
        <el-col :span="6">
          <el-descriptions column="1">
            <el-descriptions-item label="均值">{{ meanValue }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions column="1">
            <el-descriptions-item label="标准差">{{ standardDeviation }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions column="1">
            <el-descriptions-item label="百分位">{{ percentile }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions column="1">
            <el-descriptions-item label="估算百分位">{{ estimatedPercentile }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <!-- 仓位计算输入 -->
      <div class="position-input">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="currentCash"
              placeholder="请输入当前现金"
              type="number"
            />
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="currentFund"
              placeholder="请输入当前基金"
              type="number"
            />
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="calculatePosition">计算仓位</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 仓位计算结果 -->
      <div class="position-result" v-if="showResult">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-descriptions column="1">
              <el-descriptions-item label="目标现金">{{ targetCash }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="6">
            <el-descriptions column="1">
              <el-descriptions-item label="目标基金">{{ targetFund }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-main>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'

// 获取全局实例
const instance = getCurrentInstance()
const $echarts = instance.appContext.config.globalProperties.$echarts

// 响应式数据
const indexSelected = ref('')
const dataDate = ref('')
const timeRange = ref('5')
const strategySelected = ref('')
const chartRef = ref(null)
const chartInstance = ref(null)

// 计算结果
const meanValue = ref('')
const standardDeviation = ref('')
const percentile = ref('')
const estimatedPercentile = ref('')

// 仓位计算相关
const currentCash = ref('')
const currentFund = ref('')
const targetCash = ref('')
const targetFund = ref('')
const showResult = ref(false)

// 图表初始化
onMounted(() => {
  initChart()
})

// 初始化图表
const initChart = () => {
  chartInstance.value = $echarts.init(chartRef.value)
  
  // 初始图表配置
  const option = {
    title: {
      text: '指数历史数据'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [3200, 3300, 3100, 3400, 3600, 3500, 3700, 3800, 3750, 3900, 4000, 4100],
        type: 'line',
        smooth: true
      }
    ]
  }
  
  chartInstance.value.setOption(option)
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chartInstance.value.resize()
  })
}

// 开始计算按钮事件
const startCalculation = () => {
  if (!indexSelected.value || !dataDate.value || !strategySelected.value) {
    ElMessage.warning('请填写完整参数')
    return
  }
  
  // 模拟计算过程
  ElMessage.success('计算开始...')
  
  // 2秒后模拟计算完成
  setTimeout(() => {
    ElMessage.success('计算完成')
    
    // 更新计算结果
    meanValue.value = '3750.50'
    standardDeviation.value = '289.76'
    percentile.value = '68.5%'
    estimatedPercentile.value = '72.3%'
    
    // 更新图表数据
    chartInstance.value.setOption({
      series: [
        {
          data: [3200, 3300, 3100, 3400, 3600, 3500, 3700, 3800, 3750, 3900, 4000, 4100],
          type: 'line',
          smooth: true
        }
      ]
    })
  }, 2000)
}

// 计算仓位按钮事件
const calculatePosition = () => {
  if (!currentCash.value || !currentFund.value) {
    ElMessage.warning('请输入当前现金和基金')
    return
  }
  
  // 简单的仓位计算逻辑示例
  const cash = parseFloat(currentCash.value)
  const fund = parseFloat(currentFund.value)
  const total = cash + fund
  
  // 假设目标仓位是现金40%，基金60%
  targetCash.value = (total * 0.4).toFixed(2)
  targetFund.value = (total * 0.6).toFixed(2)
  
  showResult.value = true
}
</script>

<style scoped>
.position-container {
  padding: 20px;
}

.controls-container {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.chart-container {
  margin-bottom: 30px;
}

.chart {
  width: 100%;
  height: 400px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.result-container {
  margin-top: 30px;
}

.result-row {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.position-input {
  margin-bottom: 20px;
}

.position-result {
  padding: 20px;
  background-color: #f0f9eb;
  border-radius: 4px;
  border: 1px solid #e1f3d8;
}
</style>
    